<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="最爱古风小雷丘">
    <title></title>
    <style>
       a{
           text-decoration: none;
           color: inherit;
           font-size: inherit;
       }
       .box{
           width: 220px;
           margin: 100px auto;
           text-align: center;
       }
       span{
           display: inline-block;
           width: 100px;
           text-align: center;
           height: 30px;
           line-height: 30px;
           position: relative;
           border: 1px solid lightgray;
       }
       ul{
           margin: 0;
           padding: 0;
           position: absolute;
           list-style: none;
           left:-1px;
           border: 1px solid lightgray;
           display: none;
       }
       li{
           width: 100px;
           text-align: center;
           /* padding-top: 10px; */
           border-bottom: 1px dotted lightgray;
       }
       .content{
           width: 220px;
           margin: 150px auto;
           text-align: center;
       }
    </style>
</head>
<body>
   <div class="box">
       
           <span><a href="#">销售订单</a>
           <ul>
               <li><a href="#">订单1</a></li>
               <li><a href="#">订单2</a></li>
               <li><a href="#">订单3</a></li>
           </ul>
           </span><span>
               <a href="#">消费订单</a>
           <ul>
               <li><a href="#">消费1</a></li>
               <li><a href="#">消费2</a></li>
               <li><a href="#">消费3</a></li>
           </ul>
            </span>
  </div>
    <div class="content">00</div>
    <script src="jquery-3.2.1.js"></script>
</body>
</html>
<script>
    $('span').on('mouseover',function(){
        $(this).children('ul').show();
        $('li').hover(function(){
            $(this).css('background','lightgray');
        },function(){
            $(this).css('background','white');
        })
        $('li').on('click',function(){
            $('.content').html($(this).html());
        })
    });
    $('span').on('mouseout',function(ev){
        $(this).children('ul').hide();
        console.dir(ev);
    })
</script>